<template>
  <div class="searchItemList fixed-top">
    <NavBar title="商品列表" fixed back/>
    <!--商品列表-->
    <div class="item_box">
      <div v-if="emtpy">
        <EmptyData text="没有任何商品呢，您可尝试切换关键字查询！"/>
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        :offset = "offset"
        @load="onLoad"
      >
        <ul class="item_list">
          <li v-for="(item, index) in list" v-bind:key="index">
            <router-link :to="{path: 'detail', query: {goodsId: item.goodsId}}" >
              <div class="similar-product">
                <div class="similar-posre list-img">
                  <img v-lazy="GLOBAL.baseImagePath + item.picUrl"/>
                </div>
                <span class="similar-product-text">{{item.name}}</span>
                <p class="similar-product-info">
                  <span class="similar-product-price">
                    <span>¥</span>
                    <span class="big-price">{{item.salePrice}}</span>
                  </span>
                  <span class="similar-product-num">销量：{{item.sales === null ? 0 : item.sales}}</span>
                </p>
              </div>
            </router-link>
          </li>
        </ul>
      </van-list>
    </div>
    <!-- 引入公共底部 -->
    <tab-bar/>
  </div>
</template>
<script>
import NavBar from '../../components/common/NavBar.vue'
import GoTop from '../../components/common/GoTop.vue'
import TabBar from '../../components/common/TabBar.vue'
import searchItemListApi from '../../api/searchItemList'
import EmptyData from '../../components/common/EmptyData.vue'
import { Toast } from 'vant'
export default {
  name: 'searchItemList',
  data () {
    return {
      currentPage: 1,
      pageSize: 4,
      loading: false,
      finished: false,
      offset: 1,
      list: [],
      emtpy: false
    }
  },
  components: {
    NavBar,
    GoTop,
    TabBar,
    EmptyData
  },
  created () {
  },
  methods: {
    onLoad: function () {
      let _this = this
      let _goodsName = this.$route.query.goodsName
      _this.searchItemList(_goodsName, _this.currentPage, _this.pageSize)
    },
    searchItemList: function (_goodsName, _currentPage, _pageSize) {
      const _this = this
      searchItemListApi.searchByGoodsName(_goodsName, _currentPage, _pageSize).then(function (res) {
        if (res.data.success) {
          let data = res.data.re.dataList
          if (data !== null && data.length > 0) {
            for (let i = 0; i < data.length; i++) {
              _this.list.push(res.data.re.dataList[i])
            }
            _this.currentPage = _this.currentPage + 1
            _this.loading = false
            // 数据全部加载完成
            if (_this.list.length >= res.data.re.total) {
              // 加载状态结束
              _this.finished = true
            }
            if (_this.list.length === 0) {
              _this.emtpy = true
            }
          } else {
            _this.loading = false
            _this.finished = true
          }
        } else {
          _this.emtpy = true
        }
      }).catch(function () {
        Toast.fail('搜索异常')
      })
    },
    // 跳转到商品详情页
    toGoodsDetail: function (_goodsId) {
      this.$router.push({path: '/item/detail', query: {goodsId: _goodsId}})
    },
    toSearch: function () {
      this.$router.push('/search')
    }
  }
}
</script>
<style scoped>
  .searchItemList {
    height: 100%;
    height: calc(100% - 46px);
    height: -moz-calc(100% - 46px);
    height: -webkit-calc(100% - 46px);
  }
  .item_box {
    display: block;
    padding-bottom: 45px;
  }

  .item_list {
    width: 100%;
    display: inline-block;
  }

  .item_list li {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding-bottom: 4px;
    position: relative
  }

  .item_list li:nth-child(2n+1) {
    padding-right: 2px
  }

  .item_list li:nth-child(2n) {
    padding-left: 2px
  }

  .similar-product {
    background-color: #fff;
    font-size: 0
  }

  .similar-product img {
    width: 100%;
    display: block
  }

  .similar-product-text {
    box-sizing: border-box;
    height: 31px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    color: #232326;
    margin-top: 5px;
    line-height: 16px;
    margin-bottom: 3px;
    padding: 0 4px
  }

  .similar-product-info {
    height: 25px;
    font-size: 13px;
    overflow: hidden;
    margin: 0;
    padding: 5px 2px;
  }

  .similar-product-price {
    color: #f23030;
    display: inline-block;
    padding: 0 5px 0 4px;
    height: 25px;
    line-height: 25px
  }

  .similar-product-num {
    color: rgb(153, 153, 153);
    float: right;
    height: 25px;
    line-height: 25px;
  }

  .similar-product-price .big-price {
    font-size: 16px
  }

  .list-img {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-bottom: 100%;
  }

  .list-img img {
    width: 100%;
    position: absolute;
  }
</style>
